<template>
  <div class="card">
    <div class="flex items-center justify-between">
      <h2 class="text-lg font-bold">产业结构趋势分析</h2>
      <div class="text-sm text-gray-500">
        <span class="inline-flex items-center mr-3">
          <span class="w-3 h-3 rounded-full bg-blue-500 mr-1"></span>
          第一产业
        </span>
        <span class="inline-flex items-center mr-3">
          <span class="w-3 h-3 rounded-full bg-red-500 mr-1"></span>
          第二产业
        </span>
        <span class="inline-flex items-center">
          <span class="w-3 h-3 rounded-full bg-green-500 mr-1"></span>
          第三产业
        </span>
      </div>
    </div>
    <div class="chart-container bg-white rounded-lg shadow p-2 pb-5">
      <LineChart :data="industryChartData" :options="industryChartOptions" class="w-full h-48" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 预测函数 - 使用简单线性回归
const predictValue = (historicalData) => {
  const actualData = historicalData.filter((value) => value !== null)
  const n = actualData.length

  if (n < 2) return null

  let sumX = 0
  let sumY = 0
  let sumXY = 0
  let sumX2 = 0

  for (let i = 0; i < n; i++) {
    const x = i + 1
    const y = actualData[i]

    sumX += x
    sumY += y
    sumXY += x * y
    sumX2 += x * x
  }

  const slope = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX)
  const intercept = (sumY - slope * sumX) / n

  return slope * (n + 1) + intercept
}

// 初始化图表数据（包含预测值）
const initChartData = () => {
  return {
    labels: ['2021年', '2022年', '2023年', '2024年', '2025年(预测)'],
    datasets: [
      {
        label: '第一产业',
        data: [10, 12, 11, 13, predictValue([10, 12, 11, 13]).toFixed(2)],
        borderColor: 'rgba(0, 123, 255, 1)',
        backgroundColor: (context) =>
          context.dataIndex === 4 ? 'rgba(0, 123, 255, 0.2)' : 'rgba(0, 123, 255, 0.5)',
        fill: true,
        tension: 0.3,
        borderDash: (context) => (context.dataIndex === 3 ? [5, 5] : []),
        pointRadius: (context) => (context.dataIndex === 4 ? 6 : 4),
        pointBackgroundColor: (context) =>
          context.dataIndex === 4 ? 'rgba(0, 123, 255, 0.6)' : '#fff',
        pointBorderColor: 'rgba(0, 123, 255, 1)',
        pointBorderWidth: 2,
      },
      {
        label: '第二产业',
        data: [30, 32, 31, 33, predictValue([30, 32, 31, 33]).toFixed(2)],
        borderColor: 'rgba(255, 99, 132, 1)',
        backgroundColor: (context) =>
          context.dataIndex === 4 ? 'rgba(255, 99, 132, 0.2)' : 'rgba(255, 99, 132, 0.5)',
        fill: true,
        tension: 0.3,
        borderDash: (context) => (context.dataIndex === 3 ? [5, 5] : []),
        pointRadius: (context) => (context.dataIndex === 4 ? 6 : 4),
        pointBackgroundColor: (context) =>
          context.dataIndex === 4 ? 'rgba(255, 99, 132, 0.6)' : '#fff',
        pointBorderColor: 'rgba(255, 99, 132, 1)',
        pointBorderWidth: 2,
      },
      {
        label: '第三产业',
        data: [50, 52, 51, 53, predictValue([50, 52, 51, 53]).toFixed(2)],
        borderColor: 'rgba(75, 192, 192, 1)',
        backgroundColor: (context) =>
          context.dataIndex === 4 ? 'rgba(75, 192, 192, 0.2)' : 'rgba(75, 192, 192, 0.5)',
        fill: true,
        tension: 0.3,
        borderDash: (context) => (context.dataIndex === 3 ? [5, 5] : []),
        pointRadius: (context) => (context.dataIndex === 4 ? 6 : 4),
        pointBackgroundColor: (context) =>
          context.dataIndex === 4 ? 'rgba(75, 192, 192, 0.6)' : '#fff',
        pointBorderColor: 'rgba(75, 192, 192, 1)',
        pointBorderWidth: 2,
      },
    ],
  }
}

// 产业结构趋势分析图表
const industryChartData = ref(initChartData())

const industryChartOptions = ref({
  responsive: true,
  maintainAspectRatio: false,
  interaction: {
    mode: 'index',
    intersect: false,
  },
  scales: {
    x: {
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
      },
    },
    y: {
      beginAtZero: true,
      grid: {
        color: 'rgba(0, 0, 0, 0.05)',
      },
      ticks: {
        color: '#666',
        callback: (value) => value + '亿',
      },
    },
  },
  plugins: {
    legend: {
      display: false,
      labels: {
        color: '#333',
      },
    },
    tooltip: {
      mode: 'index',
      intersect: false,
      backgroundColor: 'rgba(255, 255, 255, 0.9)',
      titleColor: '#333',
      bodyColor: '#666',
      borderColor: 'rgba(200, 200, 200, 1)',
      borderWidth: 1,
      padding: 10,
      boxPadding: 5,
      usePointStyle: true,
      callbacks: {
        label: (context) => {
          let label = context.dataset.label || ''
          if (label) label += ': '
          if (context.parsed.y !== null) {
            label += context.parsed.y + '亿'
            if (context.dataIndex === 4) {
              label += ' (预测)'
            }
          }
          return label
        },
      },
    },
  },
})
</script>

<style scoped>
.chart-container {
  height: 200px;
}
</style>
